<template>
  <div class="app-container">
      
     <el-form ref="filterForm" :model="filterForm" :inline="true" label-position="left" label-width="100px">
        <el-form-item label="看涨合约" prop="callSymbol">
          <el-input v-model="filterForm.callSymbol" clearable placeholder="看涨合约" style="width: 200px;" class="filter-item" @input="handleFilter" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item label="看跌合约" prop="putSymbol">
          <el-input v-model="filterForm.putSymbol" clearable placeholder="看跌合约" style="width: 200px;" class="filter-item" @input="handleFilter" @keyup.enter.native="handleFilter" />
        </el-form-item>
      </el-form>
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="价格" name="basic">
      
          <el-radio-group v-model="filterForm.scale" @input="handleQuoteChange">
            <el-radio-button label="60">H1</el-radio-button>
            
            <el-radio-button label="1440">d1</el-radio-button>
          </el-radio-group>
    <el-row>
      <el-col :span="12">
    <el-table
      key="callRealtimeList"
      v-loading="listLoading"
      :data="callList"
      stripe
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="合约" width="140">
        <template slot-scope="{row}">
          <span >{{ row.symbol }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="140">
        <template slot-scope="{row}">
          <span >{{ row.cycle }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开盘价" width="100">
        <template slot-scope="{row}">
          <span >{{ row.open }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最低价" width="100">
        <template slot-scope="{row}">
          <span >{{ row.low }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最高价" width="100">
        <template slot-scope="{row}">
          <span >{{ row.high }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收盘价" width="100">
        <template slot-scope="{row}">
          <span >{{ row.close }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成交量" min-width="100">
        <template slot-scope="{row}">
          <span >{{ row.volume }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成交额" min-width="100">
        <template slot-scope="{row}">
          <span >{{ row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="持仓" min-width="100">
        <template slot-scope="{row}">
          <span >{{ row.interest }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" width="170">
        <template slot-scope="{row}">
          <span >{{ row.updatedAt }}</span>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination v-show="callTotal>0" :total="callTotal" :page.sync="filterForm.page" :limit.sync="filterForm.size" @pagination="getList" />
        
      </el-col>
      <el-col :span="12">
    <el-table
      key="putRealtimeList"
      v-loading="listLoading"
      :data="putList"
      stripe
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="合约" width="140">
        <template slot-scope="{row}">
          <span >{{ row.symbol }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="140">
        <template slot-scope="{row}">
          <span >{{ row.cycle }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开盘价" width="100">
        <template slot-scope="{row}">
          <span >{{ row.open }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最低价" width="100">
        <template slot-scope="{row}">
          <span >{{ row.low }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最高价" width="100">
        <template slot-scope="{row}">
          <span >{{ row.high }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收盘价" width="100">
        <template slot-scope="{row}">
          <span >{{ row.close }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成交量" min-width="100">
        <template slot-scope="{row}">
          <span >{{ row.volume }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成交额" min-width="100">
        <template slot-scope="{row}">
          <span >{{ row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="持仓" min-width="100">
        <template slot-scope="{row}">
          <span >{{ row.interest }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" width="170">
        <template slot-scope="{row}">
          <span >{{ row.updatedAt }}</span>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination v-show="putTotal>0" :total="putTotal" :page.sync="filterForm.page" :limit.sync="filterForm.size" @pagination="getList" />
        
      </el-col>
    </el-row>
    </el-tab-pane>
    <el-tab-pane label="策略" name="policy">
      
          <el-radio-group v-model="policyFilterForm.scale" @input="handlePolicyChange">     
            <el-radio-button label="60">H1</el-radio-button>
            <el-radio-button label="1440">d1</el-radio-button>
          </el-radio-group>
    <el-row>
      <el-col :span="12">
    <el-table
      key="callPolicyList"
      v-loading="listLoading"
      :data="callPolicyList"
      stripe
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="合约" min-width="100">
        <template slot-scope="{row}">
          <div >{{ row.symbol }}</div>
          <div >{{ row.cycle }}</div>
        </template>
      </el-table-column>
      <el-table-column label="开盘价">
        <template slot-scope="{row}">
          <span >{{ row.open }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最低价">
        <template slot-scope="{row}">
          <span >{{ row.low }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最高价">
        <template slot-scope="{row}">
          <span >{{ row.high }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收盘价">
        <template slot-scope="{row}">
          <span >{{ row.close }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成交量" min-width="100">
        <template slot-scope="{row}">
          <span >{{ row.volume }}</span>
        </template>
      </el-table-column>
      <el-table-column label="趋势" width="100">
        <template slot-scope="{row}">
          <el-tag
            effect="danger" v-if="row.direction == 1">
            看多
          </el-tag>
                  <el-tag
            effect="success" v-else-if="row.direction == 2">
            看空
          </el-tag>
                  <el-tag
            effect="info" v-else>
            未明确
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="policyFilterForm.scale == 15" label="趋势[日线]" width="120">
        <template slot-scope="{row}">
          <el-tag
            effect="danger" v-if="row.lDirection == 1">
            看多
          </el-tag>
                  <el-tag
            effect="success" v-else-if="row.lDirection == 2">
            看空
          </el-tag>
                  <el-tag
            effect="info" v-else>
            未明确
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="波动曲线" width="100">
        <template slot-scope="{row}">
          <span >{{ row.distance }}</span>
        </template>
      </el-table-column>
      <el-table-column label="摆动" width="200">
        <template slot-scope="{row}">
          <span >{{ Number(row.signal).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" width="160">
        <template slot-scope="{row}">
          <span >{{ row.updatedAt }}</span>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination v-show="callPolicyTotal>0" :total="callPolicyTotal" :page.sync="policyFilterForm.page" :limit.sync="policyFilterForm.size" @pagination="getPolicyList" />
      </el-col>
      <el-col :span="12">
    <el-table
      key="putPolicyList"
      v-loading="listLoading"
      :data="putPolicyList"
      stripe
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="合约" min-width="100">
        <template slot-scope="{row}">
          <div >{{ row.symbol }}</div>
          <div >{{ row.cycle }}</div>
        </template>
      </el-table-column>
      <el-table-column label="开盘价">
        <template slot-scope="{row}">
          <span >{{ row.open }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最低价">
        <template slot-scope="{row}">
          <span >{{ row.low }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最高价">
        <template slot-scope="{row}">
          <span >{{ row.high }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收盘价">
        <template slot-scope="{row}">
          <span >{{ row.close }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成交量" min-width="100">
        <template slot-scope="{row}">
          <span >{{ row.volume }}</span>
        </template>
      </el-table-column>
      <el-table-column label="趋势" width="100">
        <template slot-scope="{row}">
          <el-tag
            effect="danger" v-if="row.direction == 1">
            看多
          </el-tag>
                  <el-tag
            effect="success" v-else-if="row.direction == 2">
            看空
          </el-tag>
                  <el-tag
            effect="info" v-else>
            未明确
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="policyFilterForm.scale == 15" label="趋势[日线]" width="120">
        <template slot-scope="{row}">
          <el-tag
            effect="danger" v-if="row.lDirection == 1">
            看多
          </el-tag>
                  <el-tag
            effect="success" v-else-if="row.lDirection == 2">
            看空
          </el-tag>
                  <el-tag
            effect="info" v-else>
            未明确
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="波动曲线" width="100">
        <template slot-scope="{row}">
          <span >{{ row.distance }}</span>
        </template>
      </el-table-column>
      <el-table-column label="摆动" width="100">
        <template slot-scope="{row}">
          <span >{{ Number(row.signal).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" width="160">
        <template slot-scope="{row}">
          <span >{{ row.updatedAt }}</span>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination v-show="putPolicyTotal>0" :total="putPolicyTotal" :page.sync="policyFilterForm.page" :limit.sync="policyFilterForm.size" @pagination="getPolicyList" />
      </el-col>
    </el-row>
    </el-tab-pane>
    <el-tab-pane label="信号" name="signal">
      
          <el-radio-group v-model="signalFilterForm.scale" @input="handleSignalChange">
            <el-radio-button label="60">H1</el-radio-button>
            
            <el-radio-button label="1440">d1</el-radio-button>
          </el-radio-group>
          <el-table
            key="signalList"
            v-loading="listLoading"
            :data="signalList"
            stripe
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="合约" width="200">
              <template slot-scope="{row}">
                <span >{{ row.symbol }}</span>
              </template>
            </el-table-column>
            <el-table-column label="日期" width="140">
              <template slot-scope="{row}">
                <span >{{ row.cycle }}</span>
              </template>
            </el-table-column>
            <el-table-column label="主题" width="300">
              <template slot-scope="{row}">
                <span >{{ row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column label="识别码" width="100">
              <template slot-scope="{row}">
                <span >{{ row.magic }}</span>
              </template>
            </el-table-column>
            <el-table-column label="价格" width="100">
              <template slot-scope="{row}">
                <span >{{ row.marketPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column label="提交时间">
              <template slot-scope="{row}">
                <span >{{ row.createdAt }}</span>
              </template>
            </el-table-column>
          </el-table>
          
          <pagination v-show="signalTotal>0" :total="signalTotal" :page.sync="signalFilterForm.page" :limit.sync="signalFilterForm.size" @pagination="getSignalList" />

    </el-tab-pane>
    <el-tab-pane label="委托" name="authorize">
          <el-table
            key="authorizeList"
            v-loading="listLoading"
            :data="authorizeList"
            stripe
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="合约" width="200">
              <template slot-scope="{row}">
                <span >{{ row.symbol }}</span>
          
              <el-tag v-if="row.action == 'close'">平仓</el-tag>
              
              <el-tag v-else type="success">开仓</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="价格" width="300">
              <template slot-scope="{row}">
                <span >{{ row.price }}</span>
              </template>
            </el-table-column>
            <el-table-column label="数量" width="100">
              <template slot-scope="{row}">
                <span >{{ row.quantity }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
              <template slot-scope="{row}">
              <el-tag v-if="row.status == 1" effect="dark" type="danger">待提交</el-tag><el-tag effect="dark" type="success" v-else>已提交</el-tag>
              </template>
            </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="{row}">
          <span>{{ row.remark }}</span>
        </template>
      </el-table-column>
            <el-table-column label="提交时间" width="160">
              <template slot-scope="{row}">
                <span >{{ row.createdAt }}</span>
              </template>
            </el-table-column>
          </el-table>
          
          <pagination v-show="authorizeTotal>0" :total="authorizeTotal" :page.sync="authorizeFilterForm.page" :limit.sync="authorizeFilterForm.size" @pagination="getAuthorizeList" />

    </el-tab-pane>
    <el-tab-pane label="持仓" name="inventory">
      
          <el-radio-group v-model="signalFilterForm.scale" @input="handleInventoryChange">
            <el-radio-button label="60">H1</el-radio-button>
            
            <el-radio-button label="1440">d1</el-radio-button>
          </el-radio-group>
          <el-table
            key="inventoryList"
            v-loading="listLoading"
            :data="inventoryList"
            stripe
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="合约" width="200">
              <template slot-scope="{row}">
                <span >{{ row.symbol }}</span>
              </template>
            </el-table-column>
            <el-table-column label="开仓价格" width="300">
              <template slot-scope="{row}">
                <span >{{ row.price }}</span>
              </template>
            </el-table-column>
            <el-table-column label="持仓数量" width="300">
              <template slot-scope="{row}">
                <span >{{ row.quantity }}</span>
              </template>
            </el-table-column>
            <el-table-column label="持仓金额" width="140">
              <template slot-scope="{row}">
                <span >{{ row.amount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="提交时间">
              <template slot-scope="{row}">
                <span >{{ row.createdAt }}</span>
              </template>
            </el-table-column>
          </el-table>
          
          <pagination v-show="inventoryTotal>0" :total="inventoryTotal" :page.sync="inventoryFilterForm.page" :limit.sync="inventoryFilterForm.size" @pagination="getInventoryList" />

    </el-tab-pane>
  </el-tabs>

  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {getQuotationList} from '@/api/knowledge/quotation' 
import {getPolicyList} from '@/api/strategy/policy' 
import {getAuthorizeList} from '@/api/position/authorize'
import {getSignalList} from '@/api/strategy/signal' 
import {getInventoryList} from '@/api/fund/inventory' 

export default {
  name: 'quotationAdmin',
  components: { Pagination },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      activeName: 'policy',
      callTotal: 0,
      putTotal: 0,
      listLoading: false,
      connected:"loading",
      callList:[],
      putList:[],
      quoteScale:1,
      policyScale:1,
      signalTotal:0,
      signalList:[],
      signalFilterForm:{
        page: 1,
        symbolType:1,
        size: 10,
        scale:60,
        symbol:''
      },
      callPolicyTotal:0,
      callPolicyList:[],
      putPolicyTotal:0,
      putPolicyList:[],
      inventoryTotal:0,
      authorizeTotal:0,
      authorizeList:[],
      authorizeFilterForm:{
        page: 1,
        symbolType:1,
        size: 10,
        symbol:''
      },
      inventoryList:[],
      inventoryFilterForm:{
        page: 1,
        symbolType:1,
        size: 10,
        scale:60,
        symbol:''
      },
      policyFilterForm:{
        page: 1,
        symbolType:1,
        size: 10,
        scale:60,
        symbol:''
      },
      filterForm: {
        page: 1,
        symbolType:1,
        size: 10,
        scale:60,
        symbol:''
      }
    }
  },
  mounted(){
  },
  created() {
    let historySymbol = this.$route.query.symbol
    console.log(historySymbol)
    if(!historySymbol){
      console.log('-------------')
      historySymbol = window.localStorage.getItem("quotationSymbol")
      this.filterForm.callSymbol = window.localStorage.getItem("quotationCallSymbol")
      this.filterForm.putSymbol = window.localStorage.getItem("quotationPutSymbol")
    }else{
      this.filterForm.callSymbol = historySymbol
      this.filterForm.putSymbol = window.localStorage.getItem("quotationPutSymbol")
    }
    this.filterForm.symbol = historySymbol
    this.policyFilterForm.symbol = historySymbol
    this.signalFilterForm.symbol = historySymbol
    this.authorizeFilterForm.symbol = historySymbol
    this.handlePolicyChange()
  },
  destroyed(){
  },
  methods: {
    handleFilter:function(){
      window.localStorage.setItem("quotationSymbol",this.filterForm.symbol)
      window.localStorage.setItem("quotationCallSymbol",this.filterForm.callSymbol)
      window.localStorage.setItem("quotationPutSymbol",this.filterForm.putSymbol)
      this.filterForm.page = 1
      this.activeName = 'basic'
      this.callList = []
      this.putList = []
      this.callTotal = 0
      this.putTotal = 0
      this.putPolicyTotal = 0
      this.putPolicyList = []
      this.callPolicyTotal = 0
      this.callPolicyList = []
      this.signalTotal = 0
      this.signalList = []
      this.inventoryTotal = 0
      this.inventoryList = []
      this.authorizeTotal = 0
      this.authorizeList = []
      this.getList()
    },
    handleQuoteChange:function(){
      this.getList()
    },
    handlePolicyChange:function(){
      this.getPolicyList()
    },
    handleSignalChange:function(){
      this.getSignalList()
    },
    handleInventoryChange:function(){
      this.getInventoryList()
    },
    handleClick() {
      window.localStorage.setItem("quotationCallSymbol",this.filterForm.callSymbol)
      window.localStorage.setItem("quotationPutSymbol",this.filterForm.putSymbol)
      if(this.activeName == "basic"){
        this.getList()
      }
      if(this.activeName == "policy"){
        this.policyFilterForm.symbol = this.filterForm.symbol
        this.policyFilterForm.symbolType = this.filterForm.symbolType
        this.getPolicyList()
      }
      if(this.activeName == "signal"){
        this.signalFilterForm.symbol = this.filterForm.symbol
        this.signalFilterForm.symbolType = this.filterForm.symbolType
        this.getSignalList()
      }
      if(this.activeName == "inventory"){
        this.inventoryFilterForm.symbol = this.filterForm.symbol
        this.inventoryFilterForm.symbolType = this.filterForm.symbolType
        this.getInventoryList()
      }
      if(this.activeName == "authorize"){
        this.authorizeFilterForm.symbol = this.filterForm.symbol
        this.authorizeFilterForm.symbolType = this.filterForm.symbolType
        this.getAuthorizeList()
      }
      if(this.activeName == "record"){

      }
        console.log(this.activeName);
    },
    getList:function(){
      let _this = this;

      let _callFilterForm = {
          page: this.filterForm.page,
          symbolType:this.filterForm.symbolType,
          size: this.filterForm.size,
          scale:this.filterForm.scale,
          symbol:this.filterForm.callSymbol
      }
      console.log("期权",_this.filterForm)
      getQuotationList(_callFilterForm).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.callList = response.data.list
            _this.callTotal = response.data.total
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })

      let _filterForm = {
          page: this.filterForm.page,
          symbolType:this.filterForm.symbolType,
          size: this.filterForm.size,
          scale:this.filterForm.scale,
          symbol:this.filterForm.putSymbol
      }
      getQuotationList(_filterForm).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.putList = response.data.list
            _this.putTotal = response.data.total
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    getPolicyList:function(){
      let _this = this;
      console.log("期权",_this.policyFilterForm)

      let _callFilterForm = {
          page: this.policyFilterForm.page,
          symbolType:this.policyFilterForm.symbolType,
          size: this.policyFilterForm.size,
          scale:this.policyFilterForm.scale,
          symbol:this.filterForm.callSymbol
      }
      console.log("getPolicyList",_callFilterForm)
      getPolicyList(_callFilterForm).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.callPolicyList = response.data.list
            _this.callPolicyTotal = response.data.total
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })

      let _putFilterForm = {
          page: this.policyFilterForm.page,
          symbolType:this.policyFilterForm.symbolType,
          size: this.policyFilterForm.size,
          scale:this.policyFilterForm.scale,
          symbol:this.filterForm.putSymbol
      }
      console.log("getPolicyList",_putFilterForm)
      getPolicyList(_putFilterForm).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.putPolicyList = response.data.list
            _this.putPolicyTotal = response.data.total
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    getInventoryList:function(){
      let _this = this;

      let _callFilterForm = {
          page: this.inventoryFilterForm.page,
          symbolType:this.inventoryFilterForm.symbolType,
          size: this.inventoryFilterForm.size,
          scale:this.inventoryFilterForm.scale,
          symbol:this.filterForm.callSymbol
      }
      console.log("getInventoryList",_callFilterForm)
      getInventoryList(_callFilterForm).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.inventoryList = response.data.list
            _this.inventoryTotal = response.data.total
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    getAuthorizeList:function(){
      let _this = this;

      let _callFilterForm = {
          page: this.authorizeFilterForm.page,
          symbolType:this.authorizeFilterForm.symbolType,
          size: this.authorizeFilterForm.size,
          scale:this.authorizeFilterForm.scale,
          symbol:this.filterForm.callSymbol
      }
      console.log("getAuthorizeList",_callFilterForm)
      getAuthorizeList(_callFilterForm).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.authorizeList = response.data.list
            _this.authorizeTotal = response.data.total
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    getSignalList:function(){
      let _this = this;

      let _callFilterForm = {
          page: this.signalFilterForm.page,
          symbolType:this.signalFilterForm.symbolType,
          size: this.signalFilterForm.size,
          scale:this.signalFilterForm.scale,
          symbol:this.filterForm.callSymbol
      }
      console.log("getSignalList",_callFilterForm)
      getSignalList(_callFilterForm).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.signalList = response.data.list
            _this.signalTotal = response.data.total
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    }
  }
}
</script>
<style>

</style>